<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息管理</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./jquery-3.5.1.min.js"></script>
</head>
<body class="app-container">
    
    <div class="container">
        
        <div class="panel panel-default">
              <div class="panel-heading">
                    <h3 class="panel-title">用户查询</h3>
              </div>
              <div class="panel-body">
                    
                    <div class="row">
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <input type="text" name="" id="userName" class="form-control" placeholder="请输入用户姓名..."> 
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <button type="button" onclick="getUserList()" class="btn btn-primary">查询</button>
                            <button type="button" onclick="addUserEvt()" class="btn btn-success">新增</button>
                        </div>
                    </div>
                    
              </div>
        </div>

        
        <div class="panel panel-default" id="addUserNode">
              <div class="panel-heading">
                    <h3 class="panel-title">用户新增</h3>
              </div>
              <div class="panel-body">
                      <div class="row" id="userNodeBox">
                          
                      </div>
                      <script type="text/html" id="addUserTpl">
                        {{each userdata data}}
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div class="form-group">
                                <label for="">{{data.name}}</label>
                                <input type="{{data.type}}" class="form-control" id="{{data.key}}" placeholder="请输入{{data.name}}"  value="{{data.value}}">
                            </div> 
                        </div>
                        {{/each}}
                      </script>
                       <button type="submit" onclick="addUser()" class="btn btn-primary">提交</button>
              </div>
        </div>
        
        
        <div class="panel panel-default">
              <div class="panel-heading">
                    <h3 class="panel-title">查询结果列表</h3>
              </div>
              <div class="panel-body">
                    
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>用户性别</th>
                                <th>用户手机号</th>
                                <th>用户邮箱</th>
                                <th>用户部门</th>
                                <th>用户职位</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="userListNode">
                            
                        </tbody>
                    </table>
                    
              </div>
        </div>
        
        
    </div>
    
  <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.min.js"></script> 
  <!-- 引入cryptoJS文件 -->
  <script src="./js/crypto-js.js"></script> 
  <script type="text/html" id="userTpl">
    {{each userList user}}
    <tr>
        <td>{{user.userName}}</td>
        <td>{{user.userSex}}</td>
        <td>{{user.userMoblie}}</td>
        <td>{{user.userEmail}}</td>
        <td>{{user.userDept}}</td>
        <td>{{user.userPosition}}</td>
        <td>{{user.userRemark}}</td>
        <td>
            <button type="submit" onclick="modifyUser({{user}})" class="btn btn-xs btn-warning">修改</button>
            <button type="submit" onclick="deleteUser({{user}})" class="btn btn-xs btn-danger">删除</button>
        </td>
    </tr>
    {{/each}}
  </script>
  <script>

      $('#addUserNode').hide()

      var userdata = [
          {name:'用户编码',value:'',key:'userId',type:'text'},
          {name:'用户密码',value:'',key:'userPwd',type:'text'},
          {name:'用户名称',value:'',key:'userName',type:'text'},
          {name:'出生日期',value:'',key:'userData',type:'date'},
          {name:'用户性别',value:'',key:'userSex',type:'text'},
          {name:'用户地址',value:'',key:'userAddress',type:'text'},
          {name:'用户头像',value:'',key:'userPhoto',type:'text'},
          {name:'用户手机',value:'',key:'userMoblie',type:'text'},
          {name:'用户邮箱',value:'',key:'userEmail',type:'text'},
          {name:'入职日期',value:'',key:'userEntry',type:'date'},
          {name:'用户部门',value:'',key:'userDept',type:'text'},
          {name:'用户职位',value:'',key:'userPosition',type:'text'},
          {name:'用户权限',value:'',key:'userRole',type:'text'},
      ],
      isModify = false;

      $(function() {
         //初始化页面查询 
         getUserList()      
      })

      function getUserList() {
            var userName = $('#userName').val()
            $.ajax({
                url:`/user/list?userName=${userName}&_d=`+new Date().getTime(),
                success:function(data) {
                    if (data.code === 200 && data.data) {
                        $('#userListNode').html(template('userTpl',{userList:data.data}))
                        // console.log({userList:data.data})
                    }else{
                        alert('获取用户失败')
                    }
                },
                error:function(e) {
                    alert('获取用户信息失败')
                    console.log(e)
                }

            })
        }
        function addUserEvt() {
            $('#userNodeBox').html(template('addUserTpl',{userdata}))
            $('#addUserNode').show()
            isModify = false;
        }

        function addUser() {
            var nodes = $('#userNodeBox').find('input'),
                params = {}

            nodes.each((index,input) => {
                params[$(input).attr('id')] = $(input).val()
            });

            let cache = JSON.parse(sessionStorage.getItem('user_info'));
            params = CryptoJS.AES.encrypt(JSON.stringify(params),cache.token).toString();
            console.log(cache,params)
            $.ajax({
                url:isModify ? '/user/' + params.userId : '/user/add',
                type:isModify ? 'PUT' : 'POST',
                data:isModify ? params : {str: params},
                success: function (data) {
                    if(data.code === 200) {
                        $('#addUserNode').hide()
                        alert('新增用户成功')
                        getUserList()
                    }
                },
                error: function (e) {
                    alert('新增用户失败')
                    console.log(e)
                }
            })
        }

        //修改用户
        function modifyUser (user) {
            var _user = JSON.parse(JSON.stringify(userdata)),
                temp = [];
            //遍历userdata
            for (let i = 0;i < _user.length;i ++) {
                if (_user[i].type === 'date') {
                    _user[i].value = user[_user[i].key].substring(0,10);
                }else {
                    _user[i].value = user[_user[i].key];
                }
               
                temp.push(_user[i]);
            };
            
            $('#userNodeBox').html(template('addUserTpl',{userdata : temp}));
            $('#addUserNode').show();
            isModify = true;
        }

        function deleteUser (user) {
            $.ajax({
               url : '/user/' + user.userId,
               type : 'delete',
               success : function (data) {
                    alert('已成功删除用户数据')

               },
               error : function (e) {
                   alert('请求错误，删除失败')
                   console.log(e)
               } 
            });
            getUserList()
        }
  </script>
</body>
</html>